window.addEventListener('scroll', function() {
    let block_height = this.document.getElementsByClassName('right-block')[0].clientHeight;
    let main_height = this.document.getElementsByClassName('main-info')[0].clientHeight;
    if (this.scrollY > 120) {
        $('.main-info').addClass('main-info-fixed');
    } else {
        $('.main-info').removeClass('main-info-fixed');
    }

    if (this.scrollY > (120 + block_height - main_height)) {
        $('.main-info').addClass('main-info-bottom');
    } else {
        $('.main-info').removeClass('main-info-bottom');
    }
});

$('.pencil').on('click', function(){
    $('.new-avatar-div').css({'display':'flex'});
    $('.back-form').css({'display':'block'});
});

$('.new-avatar-close').on('click', function(){
    $('.new-avatar-div').css({'display':'none'});
    $('.back-form').css({'display':'none'});
    $('.new-avatar-btn').removeClass('active');
    $('.new-avatar').css({'display' : 'none'});
    $('.upload-zone').css({'outline-color' : '#b2b2b2'});
    $('.photo').css({'opacity' : '1'});
    $('.upload-zone svg').css({'opacity' : '1'});

});

// Отображение аватарки при загрузке

function uploadAvatar() {
    let file = document.getElementById("file-input").files[0];
    if (file) {
        let fReader = new FileReader();
        fReader.onload = (function() {
            function get_url() {
                $('.new-avatar').css({'background-image' : 'url("' + fReader.result + '")', 'display' : 'block'});
                $('.new-avatar-btn').addClass('active');
                $('.upload-zone').css({'outline-color' : 'transparent'});
                $('.photo').css({'opacity' : '0'});
                $('.upload-zone svg').css({'opacity' : '0'});
            };
            get_url();
        });
        fReader.readAsDataURL(file);
    }
}

$('#file-input').on('change', function() {
    uploadAvatar();
});

// Алгоритм для Drag and Drop

const dropZone = document.querySelector('.upload-zone');
if (dropZone) {
  
    dropZone.addEventListener("dragenter", function(e) {
        e.preventDefault();
        $('.upload-zone').css({'outline-color': '#4472e9'});
    });
  
    dropZone.addEventListener("dragover", function(e) {
        e.preventDefault();
        $('.upload-zone').css({'outline-color': '#4472e9'});
    });
  
    dropZone.addEventListener("dragleave", function(e) {
        e.preventDefault();
        $('.upload-zone').css({'outline-color' : '#b2b2b2'});
    });
  
    dropZone.addEventListener("drop", function(e) {
        e.preventDefault();
        $('.upload-zone').css({'outline-color' : '#b2b2b2'});

        let input = document.getElementById("file-input");

        let dropFiles = Array.from(e.dataTransfer.files);
        // const data = new DataTransfer();


        for (let file of dropFiles) {
            if (file.type.startsWith("image/")) {
                continue;
              } else {
                alert("Можно загружать только изображения");
                return false;
              }
        }
        input.files = e.dataTransfer.files;
        uploadAvatar();
    });
}

$('.btn-projects').on('click', function() {
    let ul = this.parentNode.childNodes[5];
    let icon = this.parentNode.childNodes[3];
    if ($(ul).hasClass('ul-open')) {
        $(ul).removeClass('ul-open');
        $(icon).css({'transform' : 'rotate(45deg)'});
    } else {
        $(ul).addClass('ul-open');
        $(icon).css({'transform' : 'rotate(0deg)'});
    }
});

$('.btn-new-projects').on('click', function() {
    let ul = this.parentNode.parentNode.childNodes[5];
    let icon = this.parentNode.parentNode.childNodes[3];
    if ($(ul).hasClass('ul-open')) {
        $(ul).removeClass('ul-open');
        $(icon).css({'transform' : 'rotate(45deg)'});
    } else {
        $(ul).addClass('ul-open');
        $(icon).css({'transform' : 'rotate(0deg)'});
    }
});

// set open and close to now btn
$('.now-projects-close').on('click', function() {
    $('.now-projects-form').css({'display':'none'});
    $('.back-form').css({'display':'none'});
});

$('.now-project-btn').on('click', function(){
    $('.now-projects-form').css({'display':'flex'});
    $('.back-form').css({'display':'block'});
});

// set open and close to new btn
$('.new-projects-close').on('click', function() {
    $('.new-projects-form').css({'display':'none'});
    $('.back-form').css({'display':'none'});
});

$('.new-project-btn').on('click', function(){
    $('.new-projects-form').css({'display':'flex'});
    $('.back-form').css({'display':'block'});
});

// Показ/скрытие пароля

function eye_view(btn, input_id) {
    let input = document.getElementById(input_id);
    
    if (btn.classList.contains('eye-show')) {
        input.setAttribute('type', 'password');
        btn.classList.remove('eye-show');
    } else {
        input.setAttribute('type', 'text');
        btn.classList.add('eye-show');
    }
}
